<template>
    <ul class="container--item__bottom animated fadeInUp">
      <li class="container--item__list" @click="shoppingMall">
        <img class="container--img__payment" alt="#"
         :src="index === 0?
         require('../../assets/bottom/Shopping-Mall-selection.png'):
         require('../../assets/bottom/Shopping-Mall.png')">
        <span class="container--list__text"
              :style="{'color':index === 0?'#186fe3': '#000'}">商城</span>
      </li>
      <li class="container--item__list" @click="repayment">
        <img class="container--img__payment" alt="#"
             :src="index === 1?
             require('../../assets/bottom/repayment-selection.png'):
             require('../../assets/bottom/repayment.png')">
        <span class="container--list__text"
              :style="{ 'color': index === 1? '#1867e3': '#000'}">还款</span>
      </li>

      <li class="container--item__list" @click="Payment">
        <img class="container--img__payment" alt="#"
          :src="index === 2?
          require('../../assets/bottom/ShoppingCart-selection.png'):
          require('../../assets/bottom/ShoppingCart.png')">
        <span class="container--list__text"
              :style="{ 'color': index === 2? '#1867e3': '#000'}">购物车</span>
        <span class="container--list__hr" v-if="imgRightNum">{{imgRightNum}}</span>
      </li>
      <li class="container--item__list" @click="mySelection">
        <img class="container--img__payment" alt="#"
             :src="index === 3?
             require('../../assets/bottom/my-selection.png'):
             require('../../assets/bottom/my.png')">
        <span class="container--list__text"
              :style="{'color': index === 3? '#1867e3': '#000'}">我的</span>
      </li>
    </ul>
</template>

<script>
// import { mapState } from 'vuex';
export default {
  name: 'bottom',
  data() {
    return {
      index: 3,
      imgRightNum: null,
    };
  },
  methods: {
    /* eslint-disable*/
    shoppingMall() {
      setTimeout(() => {
        this.$router.push({ name: 'shoppingMall'});
      }, 300);
      this.$bus.$emit('personalMove');
    },
    repayment() {
      this.index = 1;
    },
    Payment() {
      this.$router.push({ name: 'shoppingCart', params: { data: 0}})
    },
    mySelection() {
      this.$router.push({ name: 'personal'});
    },
  },
  created() {
    this.$bus.$on('delCommodit', () => {
      this.$api.getCartNum()
        .then(data => {
          this.imgRightNum = data.data.data.cartCount;
        })
    });
    this.$bus.$on('imgRightNum', () => {
      this.$api.getCartNum()
        .then(data => {
          this.imgRightNum = data.data.data.cartCount;
        })
    }),
    this.$api.getCartNum()
      .then(data => {
        console.log(data);
        this.imgRightNum = data.data.data.cartCount;
      });
  },
  // computed: {
  //   ...mapState(['person','count'])
  // },
  watch: {
    '$route': function (to) {
      if (to.name === 'shoppingMall') this.index = 0;
      if (to.name === 'shoppingMall') this.index = 0;
      if (to.name === 'shoppingCart') this.index = 2;
      if (to.name === 'personal') this.index = 3;
    }
  }
};
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .container--item__bottom{
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 1.333333333rem;
    list-style: none;
    background: #fff;
    z-index: 999;
    .container--item__list{
      position: relative;
      display: inline-block;
      text-align: center;
      height: 100%;
      width: 25%;
      .container--img__payment{
        display: block;
        margin: auto;
        width: .66666667rem;
        line-height: .66666667rem;
        padding-top: .1rem;
      }
      .container--list__text{
        display: block;
        font-size: .29333333rem;
        padding-top: .1rem;
      }
      .container--list__hr{
        width: .5rem;
        line-height: .5rem;
        font-size: .35rem;
        position: absolute;
        left: 1.3rem;
        top: 0;
        background-color: red;
        color: #fff;
        border-radius: 50%;
        text-align: center;
      }
    }
  }
</style>
